import { ref,watch} from 'vue'
import { defineStore } from 'pinia'
//引入防抖lodash
import {debounce} from "lodash"
//获取天气api数据
import { getLocalCityApi, getCityAdcodeApi, getCityWeatherApi } from '@/api/weather';

export const useWeatherStore = defineStore('weather', () => {

  //是否为本地天气
  const isLocal = ref(true)
  //该城市是否已经添加
  const isAdd = ref(false)
  //城市是否存在，该变量用于搜索城市时，提示相关城市的标签是否弹出（0，代表城市不存在；1，代表城市存在）
  const isAppear = ref(1)

  //保存的城市，该数组是点击添加后保存城市数据的数组
  const likeCityArr = ref([])

  //输入的城市名称，与input进行双向绑定，用于实时更新input输入的数据
  const cityname = ref("")

  //查找的城市名称，用于在查找时自动弹出相关的城市名称
  const address = ref("")
 
  //本地城市信息，用于获取本地城市的名称和adcode
  const local_city = ref({})

  //本地城市当天天气情况
  const weather_base_local = ref({})
  //目标城市当天天气情况
  const weather_base = ref({})
  //本地城市未来天气情况
  const weather_all_local = ref([])
  //目标城市未来天气情况
  const weather_all = ref([])

  //当地白天温度
  const daytemp_local = ref([])
  //当地夜晚温度
  const nighttemp_local = ref([])
  //目标城市白天温度
  const daytemp = ref([])
  //目标城市夜晚温度
  const nighttemp = ref([])

  //======函数部分======
  //该方法用于天气表格数据的变化，当isLocal值为true时，该方法会返回当地未来几天天气，当为false时，会返回目标城市未来几天天气
  //根据输出的数据不同，当进行操作时，天气表格部分会实时更新变化
  const allWeather = () => {
    if (isLocal.value) {
      return weather_all_local
    } else {
      return weather_all
    }
  }

//该方法用于输出温度图表数据的变化，当isLocal值为true时，该方法会返回当地几天的温度，当为false时，会返回目标城市几天的温度
//根据输出的数据不同，当进行操作时，温度图表部分会实时更新变化
  const getOption = () => {
    if (isLocal.value) {
      return [daytemp_local,nighttemp_local]
    } else {
      return [daytemp,nighttemp]
    }
  }

  //封装获取当地城市信息，给当地实时天气，当地未来天气进行赋值
  //同时获取当地未来天气的白天与晚上的温度信息，进行赋值
  const getLocalWeather = async () => {
    //获取城市信息
    const obj_city = await getLocalCityApi()
    local_city.value = obj_city
    //获取当地实时天气
    const obj_base = await getCityWeatherApi(local_city.value.adcode, "base")
    weather_base_local.value = obj_base.lives[0]
    //获取当地未来天气
    const obj_all = await getCityWeatherApi(local_city.value.adcode, "all")
    weather_all_local.value = obj_all.forecasts[0].casts
    //获取当地白天与夜晚温度
    daytemp_local.value = weather_all_local.value.map((item) => item.daytemp)
    nighttemp_local.value = weather_all_local.value.map((item) => item.nighttemp)
  }

  //封装获取目标城市信息方法
  const getTargetCityWeather = async (adcode) => {
     const res2 = await getCityWeatherApi(adcode, "base")
    const res3 = await getCityWeatherApi(adcode, "all")
    //获取的所需要的城市地址，该变量用于搜索时自动弹出相关城市名称的功能
    address.value = res2.lives[0].city
    //获得目标城市当前天气
    weather_base.value = res2.lives[0]
    //获得目标城市未来天气，目标城市白天温度和目标城市晚上温度等信息
    weather_all.value = res3.forecasts[0].casts
    daytemp.value = res3.forecasts[0].casts.map((item) => item.daytemp)
    nighttemp.value = res3.forecasts[0].casts.map((item) => item.nighttemp)
  }

  //封装获取目标城市天气的方法
  const getWeather = async (name) => {
    //根据城市名称调用api接口，获取adcode
    const res1 = await getCityAdcodeApi(name)
    //将根据名字的到的adcode值赋值给isAppear，判断查找的城市是否存在
    isAppear.value = res1.status
    //如果为零，不存在直接return，结束函数的执行;
   if (isAppear.value == 0) {
      return
   }
    //如果存在，根据获取到的adcode值，获取该城市当前和未来的天气
    const adcode = res1.geocodes[0].adcode
    //调用获取目标城市天气函数
    getTargetCityWeather(adcode)
  }    

  const getWeather2 = async (name) => {
    //根据城市名称调用api接口，获取adcode
    const res1 = await getCityAdcodeApi(name)
    //如果输入的值为空，不执行后续
    if (!cityname.value.trim()) {
      isAppear.value = 1
      return
    } else {
    //将根据名字的到的adcode值赋值给isAppear，判断查找的城市是否存在
      isAppear.value = res1.status
      //如果为零，不存在直接return，结束函数的执行;
      if (isAppear.value == 0) {
          return
      } else {
        //如果存在，根据获取到的adcode值，获取该城市当前和未来的天气
        const adcode = res1.geocodes[0].adcode
        //调用获取目标城市天气函数
        getTargetCityWeather(adcode)
      }
   }
  }    

  //跳转主页方法
  const jumpIndex = () => {
  isLocal.value = true
  isAppear.value = 1
  }
  

  //添加天气数据方法
  const addWeather = () => {
    likeCityArr.value.push({
    adcode: weather_base.value.adcode,
    city: weather_base.value.city,
    temperature: weather_base.value.temperature
  })
  isAdd.value = true
  }

  //当目标天气界面进行跳转后，挂载时该函数进行调用
  //首先调用getWeather方法，获取目标城市天气情况；然后对存储的城市数据进行遍历，查看该城市是否已经添加
  const targetCityInterfaceloads = (name) => {
    //调用getWeather方法，获取目标城市天气情况
    getWeather(name)
    //根据存储的喜爱城市数组查找，检测数组中是否已经添加过目标城市，进行相关判断
    const res = likeCityArr.value.find(item => item.city == name)
    if (res) {
      isAdd.value = true
    } else {
      isAdd.value = false
    }
  }

  //查看天气方法
  const lookWeather = () => {
    cityname.value = ""
    isLocal.value = false
  }

  //删除数据
  const deleteWeather = (adcode) => {
    const index = likeCityArr.value.findIndex(item => item.adcode == adcode)
    likeCityArr.value.splice(index, 1)
  }

   //读取存储的数据
  const getLikeCity = async () => {
    const arr = JSON.parse(localStorage.getItem('cityWeather') || '[]')
    likeCityArr.value = []
    const arr2 = arr.map(async (item) => {
      return await getCityWeatherApi(item.adcode, "base")
    })
   Promise.all(arr2).then((res) => {
      res.map(item => {
      likeCityArr.value.push(
         {
          adcode: item.lives[0].adcode,
          city: item.lives[0].city,
          temperature:item.lives[0].temperature,
        }
      )
    })
   })   
  }

   //防抖函数
  const debounceHandleInput = debounce(() => {
    getWeather2(cityname.value)
    }, 1000)
      
  //输入数据时，调用防抖函数;判断当输入数据为空时，不提示没找到数据，也不调用接口；如果不为空调用接口
  const inputWeather = () => {
      debounceHandleInput()
  }

  //对存储城市的数组进行监听，当数组添加或删除数据时，将变化后的数据转化成字符串存储进本地存储
  watch(likeCityArr, () => {
    localStorage.setItem("cityWeather", JSON.stringify(likeCityArr.value))
  }, { deep: true })

  //从仓库返回出需要的变量与方法
  return {
    isLocal, isAdd, isAppear, local_city, weather_base_local, weather_base, cityname, likeCityArr, address,
    jumpIndex, getLocalWeather,inputWeather, allWeather, getOption, getWeather, addWeather, targetCityInterfaceloads, lookWeather, deleteWeather, getLikeCity
  }
})
